<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <!-- 这一条用于移动端更好的预览设置，进行缩放比例 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>留言</title>
    <!-- Bootstrap css文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Semmanticui css文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <!-- 引入自定义css样式 -->
    <link rel="stylesheet" href="../static/css/me.css">
</head>
<body class="qt-bj buryit">






<!-- 导航标签 这个Semmantic-Ui框架有一些导航，写上对应类标签就可以啦-->
<!-- inverted加上这个导航背景就变成黑色（颜色翻转的意思）
     attached没有圆角
     m-padded-tb-mini自己写的css样式类选择器
     secondary里面的每个容器都包裹文字
     stackable当屏幕缩小的时候，导航变成下拉式,堆叠在一块-->
<nav th:replace="_fragments :: menu(6)" class="ui  inverted attached segment m-padded-tb-mini m-shadow-small ">
    <div class="ui container"><!-- container是一个一个容器来放 -->
        <div class="ui inverted secondary stackable menu">


            <!-- 导航左边 -->
            <h2 class="ui teal header item">TGF-BK</h2>
            <a href="#" class="active m-item item m-mobile-hide"><i class="mini home icon"></i>&nbsp;&nbsp;首页</a><!-- icom都是图标，官方文档里面有 -->
            <a href="#" class="m-item item m-mobile-hide"><i class="mini idea icon"></i>&nbsp;&nbsp;分类</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>&nbsp;&nbsp;标签</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="mini clone icon"></i>&nbsp;&nbsp;归档</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="mini info icon"></i>&nbsp;&nbsp;关于我</a>

            <!-- 搜索栏 -->
            <!-- right item把div容器放到最后边 -->
            <div class="right m-item item m-mobile-hide">
                <!-- input 自动为表单的形式,
                icon这个div 容器就可以放图标了
                transparent 透明的意思 -->
                <div class="ui icon inverted transparent input">
                    <input type="text" placeholder="Search...."><!-- placeholder默认显示的数据 -->
                    <i class="search link icon"></i><!-- 搜索图标,link鼠标指到变成手型 -->
                </div>
            </div>


        </div>
    </div>


    <!-- 加上面包导航，移动端点击面包导航才显示出来,m-right-top自定义样式显示到右边,m-mobile-show移动端才显示这个图标 -->
    <!-- menu toggle这个只是为了让jquery获取这个图标的，当点击这个图标，就把m-mobile-hide样式变为显示 -->
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show"><!-- icon button图标按钮 -->
        <i class="sidebar icon"></i><!-- 面包样式 -->
    </a>
</nav>






<!--中间内容,左右布局
    m-padded-tb-large控制上下内边距-->
<div class="m-opacity-map m-container m-padded-tb-large animate__animated animate__bounceInUp">
    <!-- 每一个外边框里面都要放一个container的容器，会有响应式的效果,会根据屏幕不同的尺寸达到适应的效果 -->
    <div class="ui container">

        <!-- 留言区域,有留言组件 -->
        <div  class="ui bottom attached segment"><!-- bootom attached最下面的模块加一个，跟上面拼接 -->
            <!-- teal浅蓝色 segment容器 -->





            <!-- 评论提交按钮 -->
            <div id="comment-form" class="ui form">
                <!-- 设置3个隐含域hidden隐藏的3个输入框用于提交name到后端 -->
                <!-- parentCommentId是否有父级，默认为-1 -->
                <input type="hidden" name="parentComment.id" value="-1">


                <div class="field"><!-- 评论输入容器，trxtarea多行文本域,placeholder默认显示 -->
                    <textarea required name="content" placeholder="请输入评论信息..."></textarea>
                </div>

                <div class="fields"><!-- 最下面发布按钮那一整行 -->
                    <div class="field m-mobile-wide m-margin-bottom-small"><!-- 整个输入评论的地方，m-mobile-wide当移动端的时候宽度填满,m-margin-bottom-small上下的宽度的距离 -->
                        <div class="ui left icon input"><!-- 姓名,left左边,input输入框，icon图标 -->
                            <i class="user icon"></i>
                            <input type="text" required name="nickname" placeholder="姓名"  th:value="${session.thUser}!=null ? ${session.thUser.nickname} : (${session.user}!=null ? ${session.user.nickname})">
                        </div>
                    </div>

                    <div class="field m-mobile-wide m-margin-bottom-small" ><!-- 邮箱 -->
                        <div class="ui left icon input">
                            <i class="mail icon"></i>
                            <input type="text" name="email" required placeholder="邮箱"  th:value="${session.thUser}!=null ? ${session.thUser.email} : (${session.user}!=null ? ${session.user.email})" >
                        </div>
                    </div>

                    <div class="field  m-margin-bottom-small m-mobile-wide"><!-- 发布按钮 -->
                        <button id="commentpost-btn" type="button" class="ui teal button m-mobile-wide"><i class="edit icon"></i>发布</button>
                    </div>
                </div>

            </div>



            <!-- 显示评论的列表 -->
            <!-- id="comment-container"axaj定义的id用来用户点击提交只刷新当前这个div区域 -->
            <div id="comment-container"  class="ui teal segment">
                <div th:fragment="commentList">
                    <div class="ui threaded comments" style="max-width: 100%;">
                        <h3 class="ui dividing header">评论</h3>
                        <div class="comment" th:each="comment : ${comments.content}" th:if="!${comment.parentComment}">
                            <a class="avatar">
                                <img src="https://unsplash.it/100/100?image=1005" th:src="@{${comment.avatar}}">
                            </a>

                            <!--父评论-->
                            <div class="content" >
                                <a class="author">
                                    <span th:text="${comment.nickname}">Matt</span>
                                    <div class="ui mini basic teal left pointing label m-padded-mini"  th:text="${comment.adminComment} ? '博主':'游客'">博主</div>
                                </a>
                                <div class="metadata">
                                    <span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                                </div>
                                <div class="text" th:text="${comment.content}">
                                    How artistic!
                                </div>
                                <div class="actions">
                                    <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}"  onclick="reply(this)">回复</a>
                                </div>
                            </div>




                            <!-- 第二层子级 -->
                            <div class="comments" th:if="${#arrays.length(comment.replyComments)}>0"><!-- 判断子级不为空才显示下面的区域 -->
                                <!-- 这个里面都是第二层嵌套的内容 -->
                                <div class="comment" th:each="reply : ${comment.replyComments}"><!-- 拿到评论里面的子类 -->
                                    <a class="avatar">
                                        <img src="https://unsplash.it/100/100?image=1005" th:src="@{${reply.avatar}}">
                                    </a>

                                    <!--二级评论包括所有后面的评论-->
                                    <div class="content">
                                        <a class="author">
                                            <span th:text="${reply.nickname}">小红</span>
                                            <div class="ui mini basic teal left pointing label m-padded-mini" th:text="${reply.adminComment} ? '博主':'游客'">博主</div>
                                            &nbsp;<span th:text="|@ ${reply.parentComment.nickname}|" class="m-teal">@ 小白</span><!-- m-teal颜色@的名字颜色 -->

                                        </a>
                                        <div class="metadata">
                                            <span class="date" th:text="${#dates.format(reply.createTime,'yyyy-MM-dd HH:mm')}">Today at 5:42PM</span>
                                        </div>
                                        <div class="text" th:text="${reply.content}">
                                            How artistic!
                                        </div>
                                        <div class="actions">
                                            <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}" onclick="reply(this)">回复</a>
                                        </div>
                                    </div><!-- 第二层子级所有结束 -->

                                </div>
                            </div>


                        </div>

                        <!--分页组件-->
                        <div class="ui center aligned segment">
                            <div class="ui m-xpm-kd pagination menu">
                                <a class=" item active teal" th:href="@{/boards(page=0)}" href="#">
                                    首页
                                </a>
                                <a class="item " th:if="${a}" th:href="@{/boards(page=${comments.number}-1)}"   href="#">
                                    上一页
                                </a>
                                <a class="item">
                                    当前第<h4 class="ui orange header m-inline-block m-text-thin" th:text="${comments.number} + 1"></h4>页
                                </a>
                                <a th:if="${b}" th:href="@{/boards(page=${comments.number}+1)}" class="item" >
                                    下一页
                                </a>
                                <a class="item" th:href="@{/boards(page=${comments.totalPages}-1)}"  href="#" >
                                    尾页
                                </a>
                                <a class="item">
                                    共<h4 class="ui red header m-inline-block m-text-thin" th:text="${comments.totalPages}">20</h4>页
                                </a>
                                <a class="item">
                                    共<h4 class="ui red header m-inline-block m-text-thin" th:text="${comments.totalElements}">200</h4>条
                                </a>


                            </div>
                        </div>

                    </div>
                </div>
            </div>
















        </div>



    </div>


</div>


<!-- 让这整个容器绝对定位，无论怎么滑动都固定显示 -->
<div class="m-padded m-fixed m-right-bottom">
    <div class="ui vertical icon buttons">
        <!-- 底部直接划到顶部,a链接设置成#就可以直接到顶部 -->
        <a href="#" class="ui icon button">留言</a>
    </div>
</div>




<!-- 底部 -->
<!-- m-padded-tb-mini自定义样式标签设置间隔 -->
<footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive m-mobile-hide">
    <div class="ui center aligned container"><!-- container容器,center aligned所有容器居中 -->


        <!-- grid就是一个一个格子 , 相当于bootstrap的栅格系统 , grid是分成16份-->
        <!-- 这里前面1格占1分，3格都占3份，后面一格占6份 -->
        <div class="ui inverted divided stackable grid"><!-- divided这个对grid栅格系统加上分隔线 -->
            <!-- 占几份直接用英文的数字 -->


            <!-- 第一个格子 -->
            <div class="four wide column"><!-- four4份 -->
                <div class="ui inverted link list"><!-- inverted反转颜色，link鼠标手指 -->
                    <div class="item"><!-- item居中对齐 -->
                        <!-- 图片，rounded图片是圆角,ewm-dx自定义图片大小 -->
                        <img src="http://i2.tiimg.com/724771/142be0e76be9c182.jpg" class="ui rounded image ewm-dx" alt="" >
                    </div>
                </div>
            </div>


            <!-- 第二个格子 -->
            <div class="three wide column"><!-- three3份 -->
                <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4><!-- 标题 -->
                <div class="ui inverted link list"><!-- inverted反转颜色，link鼠标手指 -->
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                    <a href="#" class="item">用户故事</a>
                </div>
            </div>


            <!-- 第三个格子 -->
            <div class="three wide column"><!-- three3份 -->
                <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4><!-- 标题 -->
                <div class="ui inverted link list"><!-- inverted反转颜色，link鼠标手指 -->
                    <a href="#" class="item">Email: 2247605840@qq.com</a>
                    <a href="#" class="item">QQ: 2247605840</a>
                    <a href="#" class="item">微信: xinyikuoai</a>
                </div>
            </div>


            <!-- 第四个格子 -->
            <div class="six wide column"><!-- seven7份 -->
                <h4 class="ui inverted header m-text-thin m-text-spaced">温暖一刻!</h4><!-- 标题 -->
                <p class="m-text-thin m-text-spaced m-opacity-mini">真正属于你的💖，不应该是伤人的冰块，应该是一杯温暖人的热茶!</p>
            </div>
        </div>


        <!-- 最底下的,divider分割线,section跟上面的div的间隔s -->
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-mini">属于你的终究是我</p>



    </div><!-- 最外面的容器container -->
</footer>















<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<!-- 因为Semmantic-UI框架要依赖jquery包 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<!-- Bootstrap js文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--/*/</th:block>/*/-->

<script>
    //当点击面包导航按钮，就显示导航列表
    //menu.toggle选中面包导航按钮，当点击的时候m-item这个类标签(导航列表)，有没有m-mobile-hide这个样式，没有就加上，有就减去
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');//toggleClass这个的作用就是当点击这个按钮，如果有这个样式就减去，如果没有就加上
    });






    //评论表单验证
    $('.ui.form').form({
        fields: {
            title: {
                identifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '请输入评论内容'
                }
                ]
            },
            content: {
                identifier: 'nickname',
                rules: [{
                    type: 'empty',
                    prompt: '请输入你的大名'
                }]
            },
            type: {
                identifier: 'email',
                rules: [{
                    type: 'email',
                    prompt: '请填写正确的邮箱地址'
                }]
            }
        }
    });



    //使用axaj的方式来校验是否为空
    $('#commentpost-btn').click(function () {
        var boo = $('.ui.form').form('validate form');
        if (boo) {
            console.log('校验成功');
            postData();
        } else {
            console.log('校验失败');
        }
    });

    //校验成功（都输入了信息）把用户输入的信息发送到后端去（因为同时要动态刷新列表所以用load重新加载一下）
    //#comment-container后面的数据传递到这个id选择器里面
    function postData() {
        $("#comment-container").load(/*[[@{/boardsTj}]]*/"/boardsTj",{
            "parentComment.id" : $("[name='parentComment.id']").val(),
            "nickname": $("[name='nickname']").val(),
            "email"   : $("[name='email']").val(),
            "content" : $("[name='content']").val(),
        },function (responseTxt, statusTxt, xhr) {//提交成功后需要做什么
            //当点击提交的时候自动弹到评论（#comment-container）哪里
            clearContent();
        });
    }

    //提交成功后干的事情(提交成功后把全部都清空)
    function clearContent() {
        $("[name='content']").val('');
        $("[name='parentComment.id']").val(-1);
        $("[name='content']").attr("placeholder", "请输入评论信息...");
    }

    //当用户点击回复的时候，拿到要回复的那个人的信息，传递到评论输入框内
    function reply(obj) {
        //获取到回复那一条定义的data-commentid（id）
        var commentId = $(obj).data('commentid');
        //获取到回复那一条定义的data-commentnickname（名字）
        var commentNickname = $(obj).data('commentnickname');
        //拿到后要变成@+姓名放到评论输入框上
        $("[name='content']").attr("placeholder", "@"+commentNickname).focus();
        $("[name='parentComment.id']").val(commentId);
        //拿到后弹到评论输入框（#comment-form）进行输入
        $(window).scrollTo($('#comment-form'),500);
    }
</script>
</body>
</html>